<script setup lang="ts">

</script>

<template>
<div class="wrap">
  <header>.header</header>
  <main>.main-content</main>
  <aside>.sidebar</aside>
  <section>.twin</section>
  <section>.twin</section>
  <footer>.footer</footer>
</div>
</template>

<style scoped lang="scss">
.wrap {
  display: grid;
  grid-template-columns: 1fr 180px 180px 180px 180px 180px 180px 1fr;
  grid-template-rows: auto 1fr 1fr auto;
  grid-template-areas:
    "header  header  header header  header  header  header  header"
    "...     main    main   main    main    aside   aside   ..."
    "...     twin-a  twin-a twin-a  twin-b  twin-b  twin-b  ..."
    "footer  footer  footer footer  footer  footer  footer  footer  "
    ;
  gap: 10px;

  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;
  color: #fff;


  & > * {
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-size: clamp(0.8rem, 1rem + 1vww, 1.25rem);
    text-shadow: 1px 1px 0 rgb(0 0 0 / 0.5);
  }

  header {
    background-color: #52a7f9;
    grid-area: header;
  }

  footer {
    background-color: #0365c0;
    grid-area: footer;
  }

  main {
    background-color: #6fc041;
    grid-area: main;
  }

  aside {
    background-color: #b36ae2;
    grid-area: aside;
  }

  section {
    background-color: #f3901a;
    &:nth-of-type(1) {
      grid-area: twin-a;
    }
    &:nth-of-type(2) {
      grid-area: twin-b;
    }
  }

}
</style>
